<template>
  <div id="RoleMenu">
    <el-row>
      <el-col :span="12" style="margin-bottom:32px; margin-top:16px">
        <el-select v-model="roleId" placeholder="请选择" @change="getRoleMenu">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.roleName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>

      <el-col :span="8">
        <el-button type="primary" @click="updateRoleMenu">修改</el-button>
      </el-col>

      <el-col :span="4">
        <router-link :to="{ name: 'Menu'}">添加菜单</router-link>
      </el-col>
    </el-row>

    <el-row>
      <el-transfer
      :titles="['未拥有权限', '已拥有权限']"
      :button-texts="['删除', '添加']"
      v-model="has"
      :data="notHas"
      :props="{
        key: 'id',
        label: 'menu'
      }">
      </el-transfer>
    </el-row>
  </div>
</template>

<style>
/* #RoleMenu .el-row {
  margin-bottom: 16px;
}

#RoleMenu {
  width: 500px;
  margin: 0px auto;
}
#RoleMenu .el-transfer-panel {
  width: 400px;
}
#RoleMenu .el-transfer__buttons {
  width: 0%;
} */
</style>

<script>
  export default {
    data () {
      return {
        notHas: [
        ],
        has: [
        ],
        options: [
        ],
        roleId: 0
      }
    },
    methods: {
      init () {
        this.getRoles()
      },
      getRoles () {
        let that = this
        this.$axios({
          method: 'get',
          url: '/api/AuthService.getRole',
          params: {'account': sessionStorage.getItem('account')}
        })
        .then(function (resp) {
          if (resp.data.status === 'success') {
            that.options = resp.data.data
          } else {
            that.$message({
              showClose: true,
              message: resp.data.cause,
              type: 'warning'
            })
          }
        })
      },
      getRoleMenu () {
        let that = this
        this.$axios({
          method: 'get',
          url: '/api/AuthService.getRoleMenu',
          params: {'account': sessionStorage.getItem('account'), 'roleId': this.roleId},
          async: false
        })
        .then(function (resp) {
          if (resp.data.status === 'success') {
            that.notHas = resp.data.notHas
            that.has = resp.data.has
          } else {
            that.$message({
              showClose: true,
              message: resp.data.cause,
              type: 'warning'
            })
          }
        })
      },
      updateRoleMenu () {
        let that = this
        this.$axios({
          method: 'get',
          url: '/api/AuthService.updateRoleMenu',
          params: {'account': sessionStorage.getItem('account'), 'roleId': this.roleId, 'menuIds': JSON.stringify(this.has)},
          async: false
        })
        .then(function (resp) {
          if (resp.data.status === 'success') {
            that.$message({
              showClose: true,
              message: '修改成功',
              type: 'success'
            })
            that.getRoleMenu()
          } else {
            that.$message({
              showClose: true,
              message: resp.data.cause,
              type: 'warning'
            })
          }
        })
      }
    },
    mounted () {
      this.init()
    }
  }
</script>
